<template>
    <div class="comment-container">
        <Avatar :url="data.avatar" :size="60" />
        <div class="comment-box">
            <div class="user-info">
                <div class="nickname">{{ data.nickname }}</div>
                <div class="time">
                    {{ data.createDate | format_time("time") }}
                </div>
            </div>
            <div class="content">{{ data.content }}</div>
        </div>
    </div>
</template>

<script>
import Avatar from "@/components/Avatar"

export default {
    components: {
        Avatar
    },
    props: {
        data: Object
    }
}
</script>

<style lang="less">
@import url(~@/styles/var.less);

.comment-container {
    display: flex;
    min-height: 100px;
    border-bottom: 1px solid grey;
    align-items: center;
    width: 97%;
    &:nth-last-child(2) {
        // 最后一个是加载区域，所以让倒数第二个没有边框线
        border: none;
    }
    .comment-box {
        margin-left: 25px;
        width: 100%;
        .user-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            .nickname {
                color: lighten(green, 15%);
            }
            .time {
                color: @secondary;
                font-size: 12px;
            }
        }
        .content {
            font-size: 15px;
            margin-bottom: 10px;
        }
    }
}
</style>
